<template>
  <div>
    <movie-header></movie-header>
    <div class="contentMain">
      <Row>
        <i-col span="24">
          <Card>
            <p slot="title">
              <Icon type="md-film" />
              全部电影
            </p>
            <ul>
              <!-- 电影列表 -->
              <movies-list
                v-for="item in movieItems"
                :key="item._id"
                :id="item._id"
                :movieName="item.movieName"
                :movieTime="item.movieTime"
              ></movies-list>
            </ul>
          </Card>
        </i-col>
      </Row>
    </div>
    <movie-footer></movie-footer>
  </div>
</template>

<script>
import MovieHeader from '../../components/MovieHeader'
import MovieFooter from '../../components/MovieFooter'
import MoviesList from '../../components/MoviesList'
export default {
  components: {
    MovieHeader,
    MovieFooter,
    MoviesList
  },
  data() {
    return {
      movieItems: []
    }
  },
  created() {
    // 获取全部电影列表
    this.$http.get('http://localhost:3000/admin/movie/list').then(
      ({ body }) => {
        const { data, status } = body
        if (status === 200) {
          this.movieItems = data
        }
      },
      err => {
        alert(err)
      }
    )
  }
}
</script>

<style lang="css" scoped>
.contentMain {
  /* margin-top: 68px; */
  padding: 0 8px;
  margin-bottom: 68px;
}
</style>
